import React, {useState, useEffect} from 'react'
import classnames from 'classnames';
import { Select } from 'antd'

const DayPicker = (props) => {
  const [billDateOpen, setBillDateOpen] = useState(false);
  const [billDate, setBillDate] = useState(props.defaultValue || '');

  useEffect(() => {
  }, [])

  const handleBillDateChange = (value) => {

  }

  const datePickerPopupRender = () => {
    const handleBillDateChange = (day) => {
      setBillDate(day)
      setBillDateOpen(false)
      props.onChange && props.onChange(day);
    }

    return (
      <ul className="day-picker-list">
        {
          Array.from({ length: 31 }, (_, i) => i + 1).map(day => (
            <li key={day} onClick={() => handleBillDateChange(day)} className={classnames({'active': billDate === day})}>
              {day}
            </li>
          ))
        }
      </ul>
    )
  }

  return (
    <Select
      open={billDateOpen}
      value={props.value}
      placeholder={props.placeholder || ''}
      defaultValue={props.defaultValue}
      onDropdownVisibleChange={(visible) => setBillDateOpen(visible)}
      onChange={handleBillDateChange}
      dropdownRender={datePickerPopupRender}
    />
  )
}

export default DayPicker;